<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="../../static/js/axios.js"></script>
    <!--element-ui需要配合组件使用,如下-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!---->
    <link rel="stylesheet" href="../../static/swiper/swiper.min.css">
    <script src="../../static/swiper/swiper.min.js"></script>
    <link href="../../static/mui-player-master/css/mui.min.css" rel="stylesheet" />
    <link href="../../static/mui-player-master/css/mui.player.min.css" rel="stylesheet" />
</head>

<body>
<div id="details">
    <el-container>
        <el-main  style="padding: 0">
            <el-row>
                <el-col :span="24">
<div class="mui-content">
    <div id="videoBox"></div>
</div>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</div>
</body>

<script src="../../static/mui-player-master/js/mui.min.js"></script>
<script src="../../static/mui-player-master/js/mui.player.min.js"></script>
<script type="text/javascript">
    var duration = 0; // 视频总时长
    mui.init();
    var mp = new MuiPlayer({
        container: '#videoBox',
        title: '视频标题',
        src: 'http://localhost:8015/upload/video/v1.mp4'
    });

    // 监听播放器已创建完成
    mp.on('ready',function(event) {
        console.log('ready --- ')
        console.log(event);
        // 视频播放监听
        document.querySelector("._play svg").addEventListener("tap", function() {
            console.log('开始播放');
            console.log('paly dispaly -> ' + document.querySelector('._play').style.display);   //block
            console.log('pause display -> ' + document.querySelector('._pause').style.display); //none
        }, false);

        // 视频暂停监听
        document.querySelector("._pause svg").addEventListener("tap", function() {
            console.log('暂停播放');
            var progressPlay = document.querySelector('#progress-play').style.width;
            console.log('paly dispaly -> ' + document.querySelector('._play').style.display);   //none
            console.log('pause display -> ' + document.querySelector('._pause').style.display); //block
            console.log('播放进度：' + progressPlay);                                            //3.72094%
            console.log('播放进度：' + (parseFloat(progressPlay) / 100 * duration));                //2.1632056784s
        }, false);
    });

    // 当视频时长已更改时触发，只有当时长大于1时发生，单位为秒（s）  可用于获取视频总时长
    mp.on('duration-change',function(event) {
        duration = event.duration
    });

    // 当用户在视频寻址时触发
    mp.on('seek-progress',function(event) {
        console.log('seek-progress --- ')
        console.log(event);
        console.log('progress paly -> ' + document.querySelector('#progress-play').style.width)
    });


</script>
</html>